Okay.
In this lecture I want to demonstrate another unique GUI object and that is a text box.
A text box allows a user to input text, and then we can listen to an event for when a player confirms
the text they've entered.
This can be useful for many systems, like having a player enter in a password, using it for an admin
system to send messages to players, and so on.
So we'll search for a text box.
Here it is.
And here we have our nice little neat text box on the screen.
This is basically just another frame, but you can enter text inside of it.
So same properties as a normal frame.
You got some color, the position the size.
But we do have a little bit of some other options with our text box.
For example, do we want to clear any text that the player has already entered when they focus into
the text box?
Right now it's enabled.
So if I were to type hello inside of this text box and then regain focus back inside of it, that text
gets deleted.
But if I were to disable that and type in some text like hello, now if I go back and type in it again,
it keeps my text in there and I'm able to edit that text.
Another option we have is if we would like to be able to enter text onto multiple lines.
So we could do hello and then we could do there and then here.
So now we have three lines inside of our text box.
And then we're also able to manipulate the spacing between this text.
And then we have some additional settings such as text editable.
And if we disable that actually let me go to clear text on focus if I type in hello.
So far nothing is happening because I'm actually not able to edit the text because text editable is
set to false.
But if I go and re-enable it and I type hello, and then let's say I wanted to disable that.
Now if I go and re-enter focus, I am not able to enter in text or delete the text that I've already
typed in there.
This property, called show native input, is most likely what you're going to use for mobile devices.
So when you enter into or you gain focus into a text box, if you're on a mobile device, typically
the mobile keyboard will show up if that is set to true.
If this is set to false and then Roblox is built in, keyboard is going to show up instead of the native
input for whatever device they're on.
Most of the time, you'll want to leave this on for mobile devices.
And of course, down here in this bottom section for our text label, we are able to change the font
that the player is typing in if we would like it to scale, if we would like to change the color of
the font, and we can even change and place in some placeholder font.
So for example, if there is nothing inside of my text label currently there's no text in here, but
if I go and set some placeholder text like enter text here.
Now we're going to see is this placeholder text.
And then when I gain focus into my text box there is our enter text here.
And when I start typing that text disappears.
And of course I can also adjust the color for that text as well.
Now, the main thing I want to focus on with this text box is its events.
So let's make a local script.
Let's get a reference to the GUI, and then let's grab our text box.
And inside of our text box there is an event called Focus Lost and it says fires.
When the client lets their focus leave the text box.
This is the event you're going to use to listen for whether or not the player entered input into the
text box.
And that's because if we connect a function to this event, we're going to actually be passed a boolean
right here.
It says enter pressed and it's a boolean.
And this will tell you whether or not the player pressed enter when they lost focus out of the text
box.
And this can signify whether or not the player just clicked off of the text box.
Or if they hit enter and they actually wanted to enter in that input or that text for the text box.
So we'll call it Enter Pressed and it is a boolean.
And what we're going to do is we're going to print this boolean out into the console.
And then let me go ahead and disable where is it multi-line in our text box.
And then let's go ahead and play test the game.
If I gain focus into my text box.
And then I lose focus by clicking away, you see it's going to print false because we did not hit enter
on our keyboard.
But let's say I typed something in here and then I were to hit enter.
Well now we got a boolean telling us hey, the player hit enter on this keyboard, meaning any text
that is inside of the text box should be used for whatever this event is listening for, so we can print
out Enter pressed.
And actually what we're going to do is if Enter Pressed was true, then we'll print out the text that
is inside of our text box.
So we'll refer to GUI dot text box and get the text that is inside of there.
So now if I go and type in hello and then I hit enter.
As you can see, it also prints hello into our console.
Let's now actually do something a little bit fun.
What I'm going to do is I'm going to listen for when my text box has gained focus.
So focused we'll connect a function and I'm going to use the tween service.
So let's grab the tween service.
And I want to basically increase the size of my text box when it has gained focus.
So one way we could do that is just by increasing the size.
Or we could also add a UI scale inside of here and change this value as well.
Doesn't really matter.
Whatever works best for you.
Let's go ahead and use the UI scale.
And then I'm going to set the anchor point to be in the center.
And then let me center this text box on my screen.
And now when we gain focus, let's go ahead and use the tween service and we'll create a tween on our
guy text box dot UI scale.
We'll do a tween info dot new.
Uh, let's say one second and let's do a wacky enum easing style.
Like let's do elastic.
And then we want to go ahead and change the scale to be let's say 1.5.
And then we'll play that tween.
And then when we lose focus in our text box.
So focus lost.
We'll do the exact same thing, but this time we'll tween our scale back to one.
We'll set that value to one.
Okay, let's go ahead and see what happens.
If I gain focus.
There we go.
Look at that.
Our text box bounces into view.
And then when I lose focus there, it bounces back.
So there's a whole bunch of different ways where you can go ahead and animate the elements on your screen.
You can use the tween service to tween all sorts of stuff.
If you want to rotate your box around, you want to change the size, you want to change the colors.
You can do whatever you want with the tween service and GUI elements, so it's really fun to mess around
with that.
I hope you enjoyed this lecture and I will see you in the next one.